
<template>
  <div class="smslogin">
    <div class="logo">
      <img src="@/assets/images/login.png" alt="" />
    </div>
    <form>
      <div class="one" :class="{ active: active == 1 }">
        <input
          type="text"
          v-model="form.mobile"
          placeholder="请输入手机号"
          @blur="active = ''"
          @focus="active = 1"
        />
        <div v-if="flag" @click="getCode" style="color: #eb6100">
          获取验证码
        </div>
        <div v-else>获取验证码({{ timer }})</div>
      </div>
      <div class="two" :class="{ active: active == 2 }">
        <input
          v-model="form.sms_code"
          type="text"
          placeholder="请输入短信验证码"
          @blur="active = ''"
          @focus="active = 2"
        />
      </div>
      <div class="three">
        <p>*未注册的手机号将自动注册</p>
        <p @click="$router.push('/login')">使用密码登录</p>
      </div>
      <div class="btn" @click="login">登录</div>
    </form>
  </div>
</template>

<script>
import { Toast } from "vant";
import { getAppCode, getLogin } from "@/utils/api.js";
const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
export default {
  name: "",
  components: {},
  data() {
    return {
      timer: 60,
      flag: true,
      form: {
        mobile: "",
        sms_code: "",
        sms_type: "login",
        type: 2, //验证码登录
        client: 1,
      },
      active: "", //判断
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 获取验证码
    getCode() {
      if (!reg.test(this.form.mobile)) {
        Toast.fail("不是手机号");
      } else {
        getAppCode(this.form).then((res) => {
          console.log(res);
        });
        const t = setInterval(() => {
          this.flag = false;
          if (this.timer > 0) {
            this.timer--;
          } else {
            this.timer = 60;
            this.flag = true;
            clearInterval(t);
          }
        }, 1000);
      }
    },
    // 登录按钮
    login() {
      if (
        this.form.mobile &&
        this.form.sms_code.length >= 6 &&
        reg.test(this.form.mobile)
      ) {
        getLogin(this.form).then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            localStorage.setItem("msmktoken", res.data.data.remember_token);
            // if (res.data.data.is_new == 1) {
            //   // 跳转到 修改 密码 ===》可以通过 用户名密码登录
            //   this.$router.push({
            //     name: "setpassword",
            //     params: {
            //       mobile: this.form.mobile,
            //       sms_code: this.form.sms_code,
            //     },
            //   });
            // } else {
            //   // 跳转到 个人中心 --->跳转到个人中心页面

            // }
            // 跳转个人中心
            this.$router.push('/userIndex')
          } else {
            this.$Toast(res.data.msg);
          }
        });
      }
    },
  },
};
</script>
<style scoped lang='scss'>
.smslogin {
  font-size: 20px;
  width: 100%;
  margin-top: 50px;
  .logo {
    text-align: center;
    margin-bottom: 50px;
    img {
      width: 525px;
      height: 115px;
    }
  }
  form {
    width: 83%;
    margin: 0 auto;
    .one {
      height: 72px;
      display: flex;
      line-height: 72px;
      border-bottom: 1px solid #f1f1f1;
      input {
        border: none;
        flex: 1;
      }
    }
    .two {
      height: 56px;
      display: flex;
      border-bottom: 1px solid #f1f1f1;
      input {
        border: none;
        flex: 1;
      }
    }
    .three {
      font-size: 17px;
      color: #999999;
      display: flex;
      margin-top: 14px;
      justify-content: space-between;
    }
    .btn {
      text-align: center;
      line-height: 64px;
      color: #fff;
      width: 622px;
      height: 64px;
      margin: 50px auto;
      background-image: url("@/assets/theme-img/login-btn.png");
      background-size: 100% 100%;
    }
    .active {
      border-bottom: 1px solid #eb6100;
    }
  }
}
</style>
